<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>我的第一个demo</title>
    <!-- 引用vue -->
    <script src="http://localhost/js/vue.js"></script>
    <!-- 引用iview -->
    <link rel="stylesheet" href="http://localhost/js/ViewUI-master/dist/styles/iview.css">
    <script src="http://localhost/js/ViewUI-master/dist/iview.js"></script>
</head>

<body>
    <!-- <template>
    </template> -->
    <div id="app">
        <Input v-model="value" placeholder=value tyle="width: 300px" />
        <Button type="primary" @click="search" ghost>搜索</Button>
        <i-table :columns="colums" :data="data1"></i-table>
        <Page :total="100" />
    </div>
    <!-- 动画 -->
    <transition mode='out-li'>
        <!-- 展示 -->
        <router-view></router-view>
    </transition>

    <rounter-link to='/login'>登陆</rounter-link>
    <rounter-link to='/register'>注册</rounter-link>
</body>

</html>
<script>
    var app1 = new Vue({
        el: app,
        data: {
            value: 'hello',
            colums: [{
                title: 'Name',
                key: 'name'
            }, {
                title: 'Age',
                key: 'age'
            }, {
                title: 'Address',
                key: 'address'
            }],
            data1: [{
                name: 'John Brown',
                age: 18,
                address: 'New York No. 1 Lake Park',
                date: '2016-10-03'
            }, {
                name: 'Joe Black',
                age: 30,
                address: 'Sydney No. 1 Lake Park',
                date: '2016-10-02'
            }, {
                name: 'Jon Snow',
                age: 26,
                address: 'Ottawa No. 2 Lake Park',
                date: '2016-10-04'
            }]
        },
        methods: {
            search: function(e) {
                //this.toast("提示框");

            },
        },
        router: router
    })
</script>
<script>
    var login = {
        template: "<h1>登录{{$route.query.id}}<h1>",
        created() {
            console.log(this.$route.query.id); //101
        }
    };
    var register = {
        template: "<h1>注册<h1>"
    };
    //路由
    var router = new VueRounter({
        router: [{
            path: '/login?id=101',
            component: login
        }, {
            path: '/register',
            component: register
        }],
        linkActiveClass: 'myactive'
    })
</script>